<!-- PasswordModal.vue -->
<template>
  <!-- 1. 密码输入弹窗（居中） -->
  <view v-if="showModalInner" class="modal-container">
    <!-- 遮罩层 -->
    <view class="overlay" @tap="close"></view>

    <!-- ✅ 主弹窗：仅包含输入框和标题 -->
    <view class="password-modal-centered">
      <view class="navbar">
        <text class="title">请输入支付密码</text>
      </view>

      <view class="content">
        <view class="password-grid" @tap="showKeyboard = true">
          <text
            v-for="index in 6"
            :key="index"
            class="cell"
            :class="{ active: index === focusIndex }"
          >
            {{ password.length >= index ? '●' : '' }}
          </text>
        </view>
      </view>
    </view>
  </view>

  <!-- 2. 底部键盘浮层（独立弹出） -->
  <view v-if="showKeyboard" class="keyboard-float">
    <view class="keyboard-content">
      <view
        v-for="(key, index) in keys"
        :key="index"
        class="key"
        :class="{
          'key-zero': key === '0',
          'key-del': key === '删除',
          'key-cancel': key === '取消'
        }"
        @tap="handleKeyTap(key)"
      >
        {{ key }}
      </view>
    </view>
  </view>

  <!-- 3. 成功提示（独立） -->
  <view v-if="successShow" class="success-overlay">
    <view class="success-box">
      <image class="success-icon" src="../static/OkIcon.png" mode="aspectFit" />
      <text class="success-text">支付成功！</text>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const props = defineProps({
  modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'success'])

// 主弹窗控制
const showModalInner = ref(false)
// 键盘浮层控制
const showKeyboard = ref(false)
// 密码状态
const password = ref('')
const focusIndex = ref(1)
// 成功提示
const successShow = ref(false)

// 键盘按键
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '取消', '0', '删除']

// 监听 v-model 控制主弹窗显示
watch(
  () => props.modelValue,
  (newVal) => {
    showModalInner.value = newVal
  },
  { immediate: true }
)

// 按键处理
const handleKeyTap = (key) => {
  if (key === '删除') {
    if (password.value.length > 0) {
      password.value = password.value.slice(0, -1)
      focusIndex.value = Math.max(password.value.length + 1, 1)
    }
  } else if (key === '取消') {
    password.value = ''
    focusIndex.value = 1
    showKeyboard.value = false // 关闭键盘浮层
  } else if (/^[0-9]$/.test(key)) {
    if (password.value.length < 6) {
      password.value += key
      focusIndex.value = password.value.length + 1

      // 输入完成
      if (password.value.length === 6) {
        console.log('✅ 支付密码输入完成:', password.value)

        // 关闭键盘
        showKeyboard.value = false
        emit('update:modelValue', false) // 关闭主弹窗

        // 延迟显示成功提示并跳转
        nextTick(() => {
          successShow.value = true
          setTimeout(() => {
            successShow.value = false

            // 跳转页面
            uni.navigateTo({
              url: '/subPackage/biddingArea/oneClickTwo',
              success: () => console.log('✅ 页面跳转成功'),
              fail: () => uni.showToast({ title: '页面不存在', icon: 'none' })
            })
          }, 1500)
        })
      }
    }
  }
}

// 关闭主弹窗
const close = () => {
  emit('update:modelValue', false)
  resetAll()
}

// 重置所有状态
const resetAll = () => {
  password.value = ''
  focusIndex.value = 1
  showKeyboard.value = false
}

// 暴露方法
defineExpose({ close, password })
</script>

<style lang="scss">
/* 1. 主弹窗样式（居中） */
.modal-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.password-modal-centered {
  width: calc(100% - 20rpx);
  height:400rpx; /* 减小高度，只留输入区 */
  margin: 0 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 999;
  display: flex;
  flex-direction: column;
  animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.navbar {
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
}

.content {
  padding: 54rpx 0;
  display: flex;
  justify-content: center;
}

.password-grid {
  display: flex;
  width: 80%;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fafafa;
}

.cell {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ddd;
  font-size: 36rpx;
  color: #333;
  background-color: #fff;

  &:last-child {
    border-right: none;
  }

  &.active {
    border: 2rpx solid #007aff;
    background-color: #f5faff;
  }
}

/* 2. 独立键盘浮层（底部弹出） */
.keyboard-float {
  position: fixed;
  top: 924rpx;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  animation: keyboardUp 0.3s ease-out;

  .keyboard-content {
      height: 700rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
   gap:0;
    
  }
}

@keyframes keyboardUp {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 键盘按键样式 */
.key {
  height:170rpx;
  width: 250rpx;
  border-right: 1px solid #cfcbcb;
  border-bottom: 1px solid #cfcbcb;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64rpx;
  color:black;
 font-weight: bold;
}

.key-del,
.key-cancel {
  font-size: 48rpx;
  color: #666;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
    color:black;

}

.key-zero {
  grid-column: span 1;
}

/* 3. 成功提示样式（不变） */
.success-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-box {
  width: 400rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}

.success-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
</style>